import React, { useState } from "react"
import { Link } from 'react-router-dom'
import { Carousel, Button, Pagination } from 'antd'
import './style/home.less'
import Tabs from '../components/Tabs'
import Navbar from "../components/Navbar"
import Header from "../components/Header"
import Footer from "../components/Footer"
import { carouselData, mainNumbers, serviceHours, activeTypes, quickEntrances, volunteers, activities } from '../config/home'
import { partners } from '../config/partners'

export default function () {
    const [currpage, setCurrPage] = useState([1, 1])

    return <div className='p-home'>
        {/* 头部 */}
        <Header />
        {/* 广告位轮播图 */}
        <div className='banner'>
            <Carousel >{carouselData.map(item =>
                <div className='carousel-item' key={item.title}>
                    <div className='img' style={{ backgroundImage: `url(${item.img})` }} alt={item.title} />
                    <div className='content'>
                        <h3 >{item.title}</h3>
                        <div className='desc'>{item.desc}</div>
                        <Button type='primary'><a href={item.link}>查看详情</a></Button>
                    </div>
                </div>)}
            </Carousel>
            <Navbar current='首页' />
        </div>
        {/* 基本数据展示和积分排行榜 */}
        <div className='informationDisplay'>
            <div className="container">
                <div className='l'>
                    <div className='mainNumbers'>
                        <ul>{mainNumbers.map((item, idx) =>
                            <li key={item.name + Math.random()}>
                                <h4>{item.name} </h4>
                                <div className='num'>{item.num} </div>
                            </li>)}
                        </ul>
                    </div>
                    <div className='videoWrap'>
                        <video src='http://e-art.top/video/SF_SutroBaths-4K_nimia_573584_768_ZH-CN.mp4' controls />
                    </div>
                </div>
                <div className='r'>
                    <div className='serviceHours'>
                        <header>
                            <h3>服务时长积分榜</h3>
                            <a href='http://www.iyigong.com/forum.php?mod=forumdisplay&fid=68' className='more'>更多&gt;&gt;</a>
                        </header>
                        <ul>{serviceHours.map((item, idx) =>
                            <li key={+Math.random()} style={{ backgroundColor: `rgba(217,28,24,${1 - idx * .8 / serviceHours.length})` }}>{idx + 1} {item.name} {item.hours}H</li>
                        )}</ul>
                    </div>
                </div>
            </div>
        </div>
        {/* 活动分类 */}
        <div className="activeTypes">
            <div className="container">
                <h2>活动分类</h2>
                <h2 className='subTitle'>ACTIVITY CLASSIFICATION</h2>
                <ul>{activeTypes.map(item =>
                    <li style={{ backgroundImage: `url(${item.img})` }} key={item.name}>
                        <a href={item.link} target='_blank'><div className='desc'>{item.desc}</div>
                        <h3 className='title'>{item.name}</h3>
                            </a>
                    </li>
                )}</ul>
            </div>
        </div>
        {/* 三大块入口 */}
        <div className="quickEntrance">
            <div className="container">
                <ul className='type'>{quickEntrances.map(item =>
                    <li key={item.title + Math.random()}>
                        <div className='iconWrap' style={{ backgroundImage: `url(${item.icon})` }} />
                        <h3>{item.title}</h3>
                        <ul className='link'>{item.children.map(link =>
                            <li key={Math.random()}><a href={link.link}>{link.text}</a></li>
                        )}</ul>
                    </li>
                )}</ul>
            </div>
        </div>
        {/* 义工风采和活动风采 */}
        <div className="volunteersAndActivities">
            <div className="container">
                <Tabs
                    tabs={[volunteers, activities].map(item => ({
                        name: item.title,
                        content: <div key={item.title + Math.random()}>
                            <h2>{item.title}</h2>
                            <h2 className='subTitle'>{item.subTitle}</h2>
                        </div>
                    }))}
                >
                    {[volunteers, activities].map((_item, idx) => <div className='tab-item' key={_item.title}>
                        {<ul className='volunteers'>{_item.data.slice((currpage[idx] - 1) * 6, currpage[idx] * 6).map((item, idx2) =>
                            // 等使用真实数据后此处的key需要修理
                            <li className='item' key={Math.random()} >
                                <a href={item.link} target='_blank'>
                                    <div className='l' style={{ backgroundImage: `url(${item.img})` }} />
                                    <div className='r'>
                                        <div className='name'>{item.name}</div>
                                        <div className='identity'>{item.identity}</div>
                                        <div className='desc'>{item.desc}</div>
                                    </div>
                                </a>
                            </li>
                        )}</ul>}
                        <div className='paginationWrap'>
                            <Pagination
                                defaultCurrent={1}
                                current={currpage[idx]}
                                defaultPageSize={6}
                                total={_item.data.length}
                                onChange={(page, pageSize) => {
                                    const arr = currpage.slice()
                                    arr[idx] = page
                                    setCurrPage(arr)
                                }}
                            />
                            <span className='more'><a href={_item.forumLink}>更多&gt;&gt;</a></span>
                        </div>
                    </div>)}
                </Tabs>
            </div>
        </div>
        {/* 合作伙伴 */}
        <div className="partners" id='partners'>
            <div className="container">
                <header>
                    <h2>合作伙伴</h2>
                    <h2 className='subTitle'>COOPERATIVE PARTNER</h2>
                    <span className='more'><Link to='/partners'>更多&gt;&gt;</Link></span>
                </header>

                <ul className='list'>{partners.slice(0, 36).map(item =>
                    // 等使用真实数据后此处的key需要修理 
                    <li title={item.name} key={item.name + Math.random()} style={{ backgroundColor: item.bg ? '#d91c18' : '#fff' }}>
                        <a href={item.link} target='_blank'><div className='img' style={{ backgroundImage: `url(${item.img})` }} /></a>
                    </li>
                )}</ul>
            </div>
        </div>
        <Footer />
    </div>
}